<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/sider.css" />
	</head>
	<body>
		<aside class="box" id="test">
		        <button id="btn">三</button>
		        <ul>
		            <li>
		                <h3>ZZES</h3>
		            </li>
		            <li><a href="#">MENU TITLE 1</a></li>
		            <li><a href="#">MENU TITLE 2</a></li>
		            <li><a href="#">MENU TITLE 3</a></li>
		            <li><a href="#">MENU TITLE 4</a></li>
		            <li><a href="#">MENU TITLE 5</a></li>
		            <li><a href="#">MENU TITLE 6</a></li>
		            <li><a href="#">MENU TITLE 7</a></li>
		        </ul>
		    </aside>
		    <section>
		        <h1>Main Content</h1>
		    </section>
			
			<script type="text/javascript">
				        var box = document.getElementById("test")
				        var btn = document.getElementById("btn")
				        btn.onclick = function() {
				            if (box.offsetLeft == 0) {
				                box.style['margin-left'] = -300 + "px"
				            } else {
				                box.style['margin-left'] = 0 + "px"
				            }
				        }
			</script>
	</body>
</html>
